import React from 'react';
import {SideMenuItemContainer, SideMenuItemWrapper} from "./SideMenuItem.css";
import {useLocation, useNavigate} from "react-router-dom";

function SideMenuItem(props) {
    let nav = useNavigate();
    let location = useLocation();
    return (
        <SideMenuItemContainer>
            <SideMenuItemWrapper>
                <button className={"navigateButton"} onClick={()=>navigateTo(props.to)}>
                    <span>
                        {props.name}
                    </span>
                </button>
            </SideMenuItemWrapper>
        </SideMenuItemContainer>
    );

    function navigateTo(to) {
        if(location.pathname !==to) nav(to);
    }
}
export default SideMenuItem;

SideMenuItem.defaultProps = {
    to:"/"
}
